/**
* 作者：大神很烦恼
* 邮箱：502863488@qq.com
* 昵称：INITSRC
*/
<!--region 封装的分页 table-->
<template>
  <div>
    <el-table id="iTable" v-loading.iTable="options.loading" :element-loading-background="THEAM.THEAM_TABLE.tableloading"
      :data="list" :height="options.isFixed && THEAM.ISDEVICE==0?height:null" :stripe="options.stripe" ref="mutipleTable" @selection-change="handleSelectionChange"
      row-key="id" :default-expand-all="options.isOpen" :tree-props="{children: options.children, hasChildren: options.hasChildren}"
      :header-cell-style="THEAM.THEAM_TABLE">
      <template slot="empty">
        <div style="width: 100%;padding-top: 50px;">
          <img class="data-pic" src=""
            alt="" />
        </div>
        <div style="line-height: 0px;padding: 10px 10px 50px 10px;">
          <span>暂无数据</span>
        </div>
      </template>
      <!--region 选择框-->
      <el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;" v-bind:selectable="options.checkstu"></el-table-column>
      <!--endregion-->
      <!--region 数据列-->
      <el-row :gutter="24" v-if="THEAM.ISDEVICE==1">
        <el-table-column key="内容" label="内容">
          <template slot-scope="scope">
            <template v-for="(column, index) in columns">
              <el-col :span="24">
                <div class="dshfn-label-item">
                  <label class="dshfn-label-item__label" style="width: unset !important;">{{column.label}}</label>
                  <label class="dshfn-label-item__content">
                    <template v-if="!column.render">
                      <template v-if="column.formatter">
                        <span v-html="column.formatter(scope.row, column,scope.row[column.prop])"></span>
                      </template>
                      <template v-else>
                        <span>{{scope.row[column.prop]}}</span>
                      </template>
                    </template>
                    <template v-else>
                      <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
                    </template>
                  </label>
                </div>
              </el-col>
            </template>
            <el-col :span="24">
              <div class="operate-group dshfn-label-item">
                <div class="dshfn-label-item__content">
                  <template v-for="(btn, key) in operates.list">
                    <div class="op-item" v-if="(btn.show != true && btn.show !=false)?btn.show(scope.$index,scope.row):btn.show"
                      :key="btn.id">
                      <el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="(btn.disabled != true && btn.disabled !=false)?btn.disabled(scope.$index,scope.row):btn.disabled"
                        :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}</el-button>
                    </div>
                  </template>
                </div>
              </div>
            </el-col>
          </template>
        </el-table-column>
      </el-row>
      <template v-for="(column, index) in columns"  v-else>
        <el-table-column :prop="column.prop" :key="column.label" :label="column.label" :align="column.align" :fixed="column.fixed"
          :width="column.width">
          <template slot-scope="scope">
            <template v-if="!column.render">
              <template v-if="column.formatter">
                <span v-html="column.formatter(scope.row, column,scope.row[column.prop])"></span>
              </template>
              <template v-else>
                <span>{{scope.row[column.prop]}}</span>
              </template>
            </template>
            <template v-else>
              <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
            </template>
          </template>
        </el-table-column>
      </template>
      <!--endregion-->
      <!--region 按钮操作组-->
      <el-table-column ref="fixedColumn" label="操作" :width="operates.width" :fixed="operates.fixed" v-if="operates.list.length > 0 && THEAM.ISDEVICE==0">
        <template slot-scope="scope">
          <div class="operate-group">
            <template v-for="(btn, key) in operates.list">
              <div v-if="key < 3">
                <div class="op-item"  v-if="(btn.show != true && btn.show !=false)?btn.show(scope.$index,scope.row):btn.show"
                  :key="btn.id">
                  <el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="(btn.disabled != true && btn.disabled !=false)?btn.disabled(scope.$index,scope.row):btn.disabled"
                    :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}</el-button>
                </div>
             </div>
            </template>
            <div v-if="operates.list.length >3">
              <el-dropdown style="padding-left: 5px;">
                <el-button type="text" size="mini">
                  更多
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <template v-for="(btn, key) in operates.list">
                    <div v-if="key >=3">
                      <div v-if="(btn.show != true && btn.show !=false)?btn.show(scope.$index,scope.row):btn.show">
                        <el-dropdown-item @click.native.prevent="btn.method(key,scope.row)" :disabled="btn.disabled">{{ btn.label }}</el-dropdown-item>
                      </div>
                    </div>
                  </template>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </template>
      </el-table-column>
      <!--endregion-->
    </el-table>
    <!--region 分页-->
    <div style=" padding: 10px;float: right;">
      <el-pagination v-if="pagination" @size-change="handleSizeChange" @current-change="handleIndexChange" :page-size="tableCurrentPagination.pageSize"
        :page-sizes="this.tableCurrentPagination.pageArray" :current-page="tableCurrentPagination.pageIndex" layout="total,sizes, prev, pager, next,jumper"
        :total="total"></el-pagination>
    </div>
    <!--endregion-->
  </div>
</template>

<script>
  const _pageArray = [10, 20, 50, 100]; // 每页展示条数的控制集合
  export default {
    props: {
      list: {
        type: Array,
        default: [] // prop:表头绑定的地段，label：表头名称，align：每列数据展示形式（left, center, right），width:列宽
      }, // 数据列表
      columns: {
        type: Array,
        default: [] // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
      },
      operates: {
        type: Object,
        default: {} // width:按钮列宽，fixed：是否固定（left,right）,按钮集合 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
      },
      total: {
        type: Number,
        default: 0
      }, // 总数
      pagination: {
        type: Object,
        default: null // 分页参数 === pageSize:每页展示的条数，pageIndex:当前页，pageArray: 每页展示条数的控制集合，默认 _page_array
      },
      options: {
        type: Object,
        default: {
          stripe: false, // 是否为斑马纹 table
          loading: false, // 是否添加表格loading加载动画
          highlightCurrentRow: false, // 是否支持当前行高亮显示
          mutiSelect: false, // 是否支持列表项选中功能
          isFixed: false, //是否固定高
          isOpen: false, //是否默认树形table展开
          children: "children", //树形table的子节点名称
          hasChildren: "hasChildren",
          tableHeight: 200, //如果固定高，默认200px
          checkstu: function(row, index) { //选择按钮禁用或启用
            return true;
          }
        }
      } // table 表格的控制参数
    },
    components: {
      expandDom: {
        functional: true,
        props: {
          row: Object,
          render: Function,
          index: Number,
          column: {
            type: Object,
            default: null
          }
        },
        render: (h, ctx) => {
          const params = {
            row: ctx.props.row,
            index: ctx.props.index
          };
          if (ctx.props.column) params.column = ctx.props.column;
          return ctx.props.render(h, params);
        }
      }
    },
    data() {
      return {
        pageIndex: 1,
        tableCurrentPagination: {},
        multipleSelection: [], // 多行选中
        height: 200,
        THEAM:null
      };
    },
    mounted() {
      if (this.pagination && !this.pagination.pageSizes) {
        this.pagination.pageArray = _pageArray; // 每页展示条数控制
      }
      this.tableCurrentPagination = this.pagination || {
        pageSize: this.total,
        pageIndex: 1
      }; // 判断是否需要分页
    },
    methods: {
      // 切换每页显示的数量
      handleSizeChange(size) {
        if (this.pagination) {
          this.tableCurrentPagination = {
            pageIndex: 1,
            pageSize: size,
            pageArray: _pageArray // 每页展示条数控制
          };
          this.$emit("handleSizeChange", this.tableCurrentPagination);
        }
      },
      // 切换页码
      handleIndexChange(currnet) {
        if (this.pagination) {
          this.tableCurrentPagination.pageIndex = currnet;
          this.$emit("handleIndexChange", this.tableCurrentPagination);
        }
      },
      // 多行选中
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.$emit("handleSelectionChange", val);
      },
      //获取table 高
      getHeight(data) {
        if(window.innerWidth < 769){
          this.THEAM.ISDEVICE = 1
        }
        if (null != data && data.type == null) {
          this.height = window.innerHeight - data;
        } else {
          this.height = window.innerHeight - this.options.tableHeight;
        }
        if(this.$refs.mutipleTable != undefined){
           this.$refs.mutipleTable.doLayout();
        }
      },
    },
    created() {
      this.THEAM = this.$store.state.ts
      window.addEventListener("resize", this.getHeight);
      this.getHeight(null);
    },
    destroyed() {
      window.removeEventListener("resize", this.getHeight);
    },
  }
</script>

<style scoped>
  .op-item {
    float: left;
    padding-left: 10px;
  }
  /* 解决element-ui的table表格控件表头与内容列不对齐问题 */
  /deep/ .el-table th.gutter {
    display: table-cell !important;
    width: 15px !important;
  }
</style>
